<template>
  <div class="article-list">
    <van-pull-refresh
      success-text="刷新成功"
      v-model="refreshing"
      @refresh="onRefresh"
    >
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <ArticleItem v-for="item in list" :key="item.art_id" :article="item" />
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { getArticles } from '@/api/article'
import ArticleItem from '@/components/article-item'
export default {
  name: 'ArticleList',
  components: {
    ArticleItem
  },
  props: {
    // 设置一个props用来接收属于自己的频道信息数据
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      timestamp: null
    }
  },
  methods: {
    async onLoad () {
      // 1.判断有没有timestamp
      if (!this.timestamp) {
        // 默认获取当前时间戳表示请求第一页
        this.timestamp = Date.now()
      }
      // 2.发送请求
      const { data } = await getArticles({
        channel_id: this.channel.id,
        timestamp: this.timestamp
      })
      console.log(data)

      // 存储服务器返回的时间戳用于请求下一页数据
      this.timestamp = data.pre_timestamp
      // 添加数据
      this.list.push(...data.results)
      // console.log(res)

      // 2.修改loading为false:本次加载结束
      this.loading = false

      // 3.如果超过100条数据，这个时候就不再触底
      if (this.list.length >= 100) {
        this.finished = true
      }
    },
    onRefresh () {
      // 0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      // 1.先清空旧数据
      this.list = []
      // 2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      // 3.重新请求数据
      this.onLoad()
      // 4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.refreshing = false
    }
  }
}
</script>

<style scoped lang="less">
.article-list {
  // 视口（在移动端是布局视口）单位：vw 和 vh，不受父元素影响
  // 1vw = 视口宽度的百分之一
  // 1vh = 视口高度的百分之一
  height: 79vh;
  overflow-y: auto;
}
</style>
